<template>
  <div>
    <div style="width: 100%; background-color: #fff">
      <el-carousel :interval="4000" type="card" height="290px" arrow="always" class="el-carousel"
        indicator-position="none">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="`${banner.imageUrl}?param=730y285`" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="main">
      <div class="left">
        <div class="left-top">
          <img src="./bg.png" />
          <el-button type="text">
            <h2 style="color: #000000; margin-right: 15px">
              热门推荐
            </h2>
          </el-button>
          <ul>
            <li><a href="#">华语</a></li>
            <li><a href="#">流行</a></li>
            <li><a href="#">摇滚</a></li>
            <li><a href="#">民谣</a></li>
            <li><a href="#">电子</a></li>
          </ul>
        </div>
        <hr color="#C20C0C" style="margin-bottom: 20px" />
        <Playlists></Playlists>

        <div class="left-mid">
          <img src="./bg.png" />
          <el-button type="text">
            <h2 style="color: #000000; margin-right: 15px">
              新碟上架
            </h2>
          </el-button>
        </div>
        <hr color="#C20C0C" style="margin-bottom: 20px" />

        <div class="left-mid-content">
          <div v-for="album in topAlbum" :key="album.id">
            <Record :album="album"></Record>
          </div>
        </div>

        <div class="left-bottom">
          <img src="./bg.png" />
          <el-button type="text">
            <h2 style="color: #000000; margin-right: 15px">榜单</h2>
          </el-button>
        </div>
        <hr color="#C20C0C" style="margin-bottom: 20px" />
        <div class="left-bottom-content">
          <ul>
            <li>
              <img src="https://p1.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100" />
              <div>
                <router-link to="/toplist">飙升榜</router-link>
                <a title="播放">
                  <el-button type="text" icon="el-icon-video-play" @click="changeMusiclist(soarList)"></el-button>
                </a>
                <a href="" title="收藏">
                  <el-button type="text" icon="el-icon-folder-add"></el-button>
                </a>
              </div>
            </li>
            <li v-for="(item, index) in soarList" :key="item.id">
              <span>{{ index + 1 }}</span><a href="">{{ item.name }}</a>
            </li>
            <li><router-link to="/toplist">查看全部></router-link></li>
          </ul>
          <ul>
            <li>
              <img src="http://p4.music.126.net/wVmyNS6b_0Nn-y6AX8UbpQ==/109951166952686384.jpg?param=100y100" />
              <div>
                <a>新歌榜</a>
                <a title="播放">
                  <el-button type="text" icon="el-icon-video-play" @click="changeMusiclist(newSongList)"></el-button>
                </a>
                <a href="" title="收藏">
                  <el-button type="text" icon="el-icon-folder-add"></el-button>
                </a>
              </div>
            </li>
            <li v-for="(item, index) in newSongList" :key="item.id">
              <span>{{ index + 1 }}</span><a href="">{{ item.name }}</a>
            </li>
            <li><router-link to="/toplist?id=3779629">查看全部></router-link></li>
          </ul>
          <ul>
            <li>
              <img src="http://p3.music.126.net/iFZ_nw2V86IFk90dc50kdQ==/109951166961388699.jpg?param=100y100" />
              <div>
                <a href="#">原创榜</a>
                <a href="" title="播放">
                  <el-button type="text" icon="el-icon-video-play" @click="changeMusiclist(originalList)"></el-button>
                </a>
                <a href="" title="收藏">
                  <el-button type="text" icon="el-icon-folder-add"></el-button>
                </a>
              </div>
            </li>
            <li v-for="(item, index) in originalList" :key="item.id">
              <span>{{ index + 1 }}</span><a href="">{{ item.name }}</a>
            </li>
            <li><router-link to="/toplist?id=2884035">查看全部></router-link></li>
          </ul>
        </div>
      </div>

      <Right />
    </div>
  </div>
</template>

<script>
import Playlists from "./Playlists";
import Right from "@/views/Recommend/right";

export default {
  name: "Recommend",
  components: { Playlists, Right },
  data() {
    return {
      banners: [],
      swiperOptions: {
        initialSlide: 0,
        slidesPerView: 5,
        slidesPerGroup: 5,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      topAlbum: [],
      soarList: [],
      newSongList: [],
      originalList: [],
    };
  },
  mounted() {
    // 获取轮播图数据
    this.$API.getBanner().then((res) => {
      if (res.status === 200) {
        this.banners = res.data.banners;
      }
    });

    // 新碟上架
    this.$API.topAlbum({}).then((res) => {
      if (res.status === 200) {
        this.topAlbum = res.data.weekData.splice(0, 10);
      }
    });

    // 榜单
    this.$API.topListDetail().then((res) => {
      if (res.status === 200) {
        //飙升榜id
        let soarId =
          res.data.list.find((item) => item.name === "飙升榜").id + "";
        //新歌榜id
        let newSongId =
          res.data.list.find((item) => item.name === "新歌榜").id + "";
        //原创榜id
        let originalListId =
          res.data.list.find((item) => item.name === "原创榜").id + "";

        // 获取榜单数据
        this.$API.listDetail(soarId).then((res) => {
          this.soarList = res.data.playlist.tracks.splice(0, 10);
        });
        this.$API.listDetail(newSongId).then((res) => {
          this.newSongList = res.data.playlist.tracks.splice(0, 10);
        });
        this.$API.listDetail(originalListId).then((res) => {
          this.originalList = res.data.playlist.tracks.splice(0, 10);
        });
      }
    });
  },
  methods: {
    changeMusiclist(list) {
      this.$bus.$emit("changeMusiclist", list);
    },
  },
};
</script>

<style scoped lang='less'>
.el-carousel {
  width: 1460px;
  margin: 0 auto;
}

.main {
  width: 1020px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;

  .left {
    width: 770px;
    padding: 20px;
    border: 1px solid #f5f5f5;

    .el-icon-s-help {
      color: #c20c0c;
    }

    .left-top {
      display: flex;
      align-items: center;

      ul {
        display: flex;
        flex-flow: row nowrap;

        li {
          margin-right: 15px;
        }
      }
    }

    .left-mid {
      margin-top: 20px;
    }

    .left-mid-content {
      height: 300px;
      padding: 10px;
      background: #f5f5f5;
      border: 1px solid #d3d3d3;
      display: flex;
      flex-flow: wrap;

      div {
        flex: 20%;
      }
    }

    .left-bottom {
      margin-top: 20px;
    }

    .left-bottom-content {
      height: 480px;
      display: flex;
      flex-flow: row nowrap;

      ul {
        width: calc(730px / 3);
        background-color: #f5f5f5;
        border: 1px solid #d3d3d3;
        display: flex;
        flex-flow: column nowrap;

        li:first-child {
          height: 140px;
          padding: 20px;
          display: flex;

          img {
            margin-right: 10px;
          }

          div {
            a:first-child {
              display: block;
              margin-top: 15px;
              font-size: 18px;
              font-weight: bolder;
            }

            button {
              font-size: 25px;
            }
          }
        }

        li:nth-child(2n) {
          background-color: #e8e8e8;
        }

        li:nth-child(-n + 4) {
          span {
            color: #c20c0c;
          }
        }

        li {
          padding: 5px 0px 5px 20px;
          height: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;

          span {
            display: inline-block;
            width: 30px;
          }
        }

        a:hover {
          border-bottom: #c20c0c 1px solid;
        }
      }
    }
  }
}
</style>
